<template>
  <div class="analysis-container">
    <el-row style="background: white; height: 80px; padding-top: 15px;padding-left: 20px;padding-right: 20px">
      <el-col :span="12" style="min-height: 50px">效果测试报表</el-col>
      <el-col :span="12" style="min-height: 50px" align="right">
        <!-- <el-date-picker
          v-model="timeDate"
          small
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        /> -->
      </el-col>
    </el-row>
    <el-row style="background: white;padding-bottom: 20px">
      <el-col :span="6" align="center">
        <div>标签准确率</div>
        <div style="margin: 20px 0">
          <span style="font-size: 30px">{{ Params.Accuracy }}</span>
          <span style="font-size: 5px">%</span>
        </div>
        <!-- <div>正确标签数：587</div>
        <div>标签总数：999</div> -->
      </el-col>
      <el-col :span="6" align="center">
        <div>标签GT召回率</div>
        <div style="margin: 20px 0">
          <span style="font-size: 30px">{{ Params.Recall }}</span>
          <span style="font-size: 5px">%</span>
        </div>
        <!-- <div>补充标签总数：323</div>
        <div>预测准确标签数：982</div> -->
      </el-col>
      <el-col :span="6" align="center">
        <div>图片召回</div>
        <div style="margin: 20px 0">
          <span style="font-size: 30px">{{ Params.ImageRecall }}</span>
          <span style="font-size: 5px">%</span>
        </div>
        <!-- <div>图片总数量：3233</div> -->
      </el-col>
      <el-col :span="6" align="center">
        <div>图片标签数</div>
        <div style="margin: 20px 0">
          <span style="font-size: 30px">{{ Params.AvgLabelNum }}</span>
        </div>
        <!-- <div>同比上个周期： -87</div> -->
      </el-col>
    </el-row>
    <el-row :gutter="24" style="background: white;margin: 11px 0px">
      <el-col :xs="24" :sm="24" :lg="8" align="center">
        <div style="margin-top: 54px">错误数</div>
        <ve-pie :data="RightData" :legend-visible="false" :extend="cExtend" />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" align="center">
        <div class="cell-flex" style="margin-top: 54px; align-items: center;">
          <div class="cell-flex_item">有效评测集数：{{ Params[hisValue] ? Params[hisValue].length : 0 }}</div>
          <el-select v-model="hisValue" size="mini" style="width:130px" placeholder="请选择" @change="handleHisValue">
            <el-option
              v-for="item in hisOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              size="mini"
            />
          </el-select>
        </div>
        <ve-histogram :data="hisData" :settings="hisSettings" :extend="hisExtend" />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" align="center">
        <div style="margin-top: 54px">样本总量：{{ Params.FromMapNum }}</div>
        <ve-pie :data="chartData" :legend-visible="false" :extend="chartExtend" />
      </el-col>
    </el-row>
    <el-row style="background: white;margin-top: 18px;padding-top: 25px">
      <el-col :span="12" style="padding-left: 32px;font-size: 20px;font-weight:700" align="left">详细数据</el-col>
      <el-col :span="12" style="padding-right: 32px" align="right">
        <el-button type="primary" @click="toAnalysis">多选分析</el-button>
      </el-col>
    </el-row>
    <el-row style="background: white">
      <el-table
        :data="tableData"
        style="width:100%; padding: 20px 20px 0 20px"
        @selection-change="changeAnalysisList"
        @select-all="changeAnalysisList"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column prop="Id" width="80" label="序号" align="center" />
        <el-table-column prop="Name" label="视频名" align="center" />
        <el-table-column prop="Label" label="预测标签数" align="center" />
        <el-table-column prop="TrueLabel" label="正确标签数" align="center" />
        <el-table-column prop="WrongLabel" label="错误标签数" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="text" size="small" @click="toAnalysis(row)">分析</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="listQuery.Page"
        :limit.sync="listQuery.Size"
        :auto-scroll="false"
        style="text-align:right;margin-top:0;"
        @pagination="getVideoList"
      />
    </el-row>
  </div>
</template>

<script>
import {
  fetchTaskResult,
  fetchTaskVideoResultList
} from '@/api/video'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'Analysis',
  components: {
    Pagination
  },
  data() {
    return {
      hisValue: 'AccMap',
      hisOptions: [{
        value: 'AccMap',
        label: '标签准确率'
      }, {
        value: 'RecMap',
        label: '标签GT召回率'
      }, {
        value: 'ImgRecMap',
        label: '图片召回'
      }, {
        value: 'AvgLabMap',
        label: '图片标签数'
      }],
      timeDate: '',
      cExtend: {
        title: {
          text: '有效标签',
          left: 'center',
          top: 30,
          textStyle: {
            color: '#265fd0'
          }
        },
        series: {
          label: {
            show: true
          },
          labelLine: {
            show: false
          }
        }
      },
      chartExtend: {
        title: {
          text: '样本分布',
          left: 'center',
          top: 30,
          textStyle: {
            color: '#265fd0'
          }
        },
        series: {
          label: {
            show: true
          },
          labelLine: {
            show: false
          }
        }
      },
      RightData: {
        columns: ['key', 'value'],
        rows: [
          { 'key': '1/1', 'value': 1393 },
          { 'key': '1/2', 'value': 3530 },
          { 'key': '1/3', 'value': 2923 },
          { 'key': '1/4', 'value': 1723 },
          { 'key': '1/5', 'value': 3792 },
          { 'key': '1/6', 'value': 4593 }
        ]
      },
      chartData: {
        columns: ['key', 'value'],
        rows: [
          { 'key': '1/1', 'value': 1393 },
          { 'key': '1/2', 'value': 3530 },
          { 'key': '1/3', 'value': 2923 },
          { 'key': '1/4', 'value': 1723 },
          { 'key': '1/5', 'value': 3792 },
          { 'key': '1/6', 'value': 4593 }
        ]
      },
      hisExtend: {
        legend: {
          bottom: 35
        }
      },
      hisSettings: {
        stack: { '类型': ['图像', '视频', '文本'] }
      },
      hisData: {
        columns: ['类型', '图像', '视频', '文本'],
        rows: [
          { '类型': '图像', '图像': 20 },
          { '类型': '视频', '视频': 30 },
          { '类型': '文本', '文本': 40 }
        ]
      },
      tableData: [],
      STaskIdList: '',
      ReportKey: 0,
      VideoLoading: false,
      Params: {},
      listQuery: {
        Page: 1,
        Size: 10,
        IsBadCase: 0
      },
      total: 0,
      VersionId: 0,
      toAnalysisList: []
    }
  },
  created() {
    const query = sessionStorage.getItem('TASKDATA') ? JSON.parse(sessionStorage.getItem('TASKDATA')) : ''
    if (query && query.STaskIdList) {
      this.STaskIdList = query.STaskIdList
      this.ReportKey = query.ReportKey
      this.VersionId = query.VersionId
      this.getList()
      this.getVideoList()
    }
  },
  methods: {
    handleHisValue(v) {
      const params = this.Params[v]
      console.log(params)
      const hisSettings = []
      const columns = ['类型']
      const rows = []
      params.forEach(item => {
        hisSettings.push(item.key)
        columns.push(item.key)
        const rowsObj = {
          '类型': item.key
        }
        rowsObj[item.key] = item.value
        rows.push(rowsObj)
      })
      this.hisSettings.stack = { '类型': hisSettings }
      this.hisData.columns = columns
      this.hisData.rows = rows
    },
    getList() {
      this.VideoLoading = true
      fetchTaskResult({ taskId: this.STaskIdList }).then(res => {
        var response = res.Data[0]
        this.Params = JSON.parse(response)
        console.log(this.Params)
        this.Params.Accuracy = (this.Params.Accuracy * 100).toFixed(2)
        this.Params.Recall = (this.Params.Recall * 100).toFixed(2)
        this.Params.ImageRecall = (this.Params.ImageRecall * 100).toFixed(2)
        this.Params.AvgLabelNum = this.Params.AvgLabelNum.toFixed(3)
        let FromMapNum = 0
        this.Params.FromMap.forEach(_ => {
          FromMapNum += _.value
        })
        this.Params.FromMapNum = FromMapNum
        this.chartData.rows = this.Params.FromMap
        this.RightData.rows = [{
          key: '有效标签',
          value: this.Params.FromMap.RightInGtNum
        }, {
          key: '辅助标签',
          value: this.Params.RightLabelNum - this.Params.RightInGtNum
        }]
        this.handleHisValue(this.hisValue)
        console.log(this.Params)
      })
    },
    getVideoList() {
      this.VideoLoading = true

      // 假数据
      this.ReportKey = 0
      fetchTaskVideoResultList({ ...this.listQuery, taskId: this.STaskIdList, ReportType: Number(this.ReportKey) })
        .then(res => {
          this.tableData = JSON.parse(res.Data[0])
          this.total = res.Count
          setTimeout(() => {
            this.VideoLoading = false
          }, 0.5 * 1000)
        })
        .catch(() => {
          this.VideoLoading = false
        })
    },
    changeAnalysisList(selection) {
      this.toAnalysisList = []
      this.toAnalysisList = selection.map(item => {
        var temp = {}
        temp['Id'] = item.Id
        temp['Name'] = item.Name
        temp['Url'] = item.Url
        temp['Type'] = this.ReportKey
        return temp
      })
    },
    toAnalysis(row) {
      if (row.Id) {
        console.log(row)
        this.$router.push({ path: '/taskList/list/analysis',
          query: { FromReport: true, VersionId: this.VersionId, FileList: [{ Id: row.Id, Name: row.Name, Url: row.Url, Type: this.ReportKey }] }})
      } else {
        if (this.toAnalysisList.length === 0) {
          return
        }
        this.$router.push({ path: '/taskList/list/analysis',
          query: { FromReport: true, VersionId: this.VersionId, FileList: this.toAnalysisList }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input__inner{
  height: 40px;
}
.analysis-container{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
